﻿<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>test</title>

</head>
<body>
<div id="app" >
    <div @click="flag=!flag">
        点击我试试
    </div>
    <!--  v-if 满足条件就显示  v-else 不满足条件显示
       if(flag==true){
          <p >你好 黑马程序员</p>
       }else{
          <p >你好 传智播客</p>
       }
    -->
    <p v-if="flag">你好 黑马程序员</p>
    <p v-else="flag">你好 传智播客</p>
</div>

<script src="../js/vue.js"></script>
<!--js  vue 数据模型层 -->
<script>

    var vue = new Vue({
        el:"#app",
        data:{
            flag:false
        }
    })

</script>
</body>
</html>